<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.use 用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #loading-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.7);
            color: #fff;
        }
    </style>
</head>
<body>
<div id="root">
    <button @click="showLoading">显示Loading</button>
</div>
<script>
    const loadingPlugin = {
        install: function(vm) {
            const LoadingComponent = vm.extend({
                template: '<div id="loading-wrapper">{{msg}}</div>',
                props: {
                    msg: {
                        type: String,
                        default: 'loading...'
                    }
                }
            }, 'LoadingComponent')
            function Loading(msg) {
                const div = document.createElement('div')
                div.setAttribute('id', 'loading-wrapper')
                document.body.append(div)
                new LoadingComponent({
                    props: {
                        msg: {
                            type: String,
                            default: msg
                        }
                    }
                }).$mount('#loading-wrapper')
                return () => {
                    document.body.removeChild(document.getElementById('loading-wrapper'))
                }
            }
            vm.prototype.$loading = Loading
        }
    }
    Vue.use(loadingPlugin)
    new Vue({
        el: '#root',
        methods: {
            showLoading() {
                const hide = this.$loading('正在加载，请稍等...')
                setTimeout(() => {
                    hide()
                }, 2000)
            }
        }
    })
</script>
</body>
</html>
